آموزش Vue.js: ساخت یک برنامه Full Stack با Firebase، Vuex و Router [ویدئو]

سرفصل ها و درس ها

مقدمه و شروع Introduction & Getting Started

• معرفی Introduction

• آنچه برای این دوره نیاز خواهید داشت What you will need for this course

راه اندازی پروژه: برنامه پیتزا سیاره Project Setup: Planet Pizza App

• معرفی بخش Section intro

• راه اندازی پروژه با استفاده از Vue-CLI Project setup using the Vue-CLI

• اجزای هدر و پاورقی Header and Footer components

• جزء صفحه اصلی Home page component

• طراحی اجزای ما Styling our components

• ایجاد جزء منو Creating the menu component

• حلقه زدن از طریق آیتم های منو Looping through menu items

• ارسال دستورات به یک آرایه Pushing orders to an array

• افزودن سبد خرید Adding the shopping basket

• پویا کردن سبد خرید Making the shopping basket dynamic

• روش های سبد خرید Shopping basket methods

• ساختار بخش مدیریت Structuring the admin section

• لیست سفارشات فعلی Listing current orders

• افزودن جزء جدید پیتزا Add new pizza component

• اتصالات ورودی را تشکیل دهید Form input bindings

• بخش بیرونی Section outro

راه اندازی پایگاه داده و احراز هویت Firebase Firebase database and authentication setup

• معرفی بخش Section intro

• راه اندازی پایگاه داده Firebase ما Setting up our Firebase database

• افزودن مولفه ورود Adding the login component

• احراز هویت Firebase را فعال کنید Enable Firebase authentication

• ورود و خروج Signing in and out

• اجزای نهایی Final components

• بخش بیرونی Section outro

روتر Vue Vue Router

• معرفی بخش Section intro

• نصب و راه اندازی روتر Router installation & setup

• ایجاد مسیرهای ما Creating our routes

• لینک روتر با جزئیات بیشتر Router link in more detail

• مسیرهای الزام آور و پویا Binding and dynamic routes

• حالت های تاریخچه و هش History and hash modes

• همه مسیرها را بگیرید و تغییر مسیر دهید Catch all routes and redirecting

• مسیرهای تو در تو Nested routes

• نمای روتر تو در تو Nested router view

• افزودن نام به مسیرها Adding names to routes

• روش های ناوبری روتر Router navigation methods

• گاردهای ناوبری جهانی Global navigation guards

• محافظ قطعات Component guards

• نگهبانی از مسیرهای فردی Guarding individual routes

• تعریف رفتار اسکرول Defining scroll behaviour

• تغییر فاکتور مسیرهایمان Re-factoring our routes

• نماهای روتر نامگذاری شده Named router views

• بخش بیرونی Section outro

مدیریت صحنه با Vuex Stage Management with Vuex

• معرفی بخش Section intro

• Vuex چیست؟ What is Vuex?

• نصب و ساختار فایل Installation and file structure

• وضعیت اولیه و دسترسی به فروشگاه Initial state and accessing the store

• بهبود دسترسی به فروشگاه با دریافت کننده Improving store access with getters

• تغییر حالت با جهش Changing state with mutations

• اقدامات چیست؟ What are actions?

• تنظیم کاربر با اقدامات Setting the user with actions

• اقدامات اعزامی Dispatching actions

• گیرنده های نقشه برداری Mapping getters

• تقسیم فروشگاه ما به فایل های جداگانه Splitting our store into separate files

• با استفاده از ماژول ها Using modules

• بخش بیرونی Section outro

اتصال به Firebase و تکمیل پروژه ما Binding to Firebase & finishing our project

• معرفی بخش Section intro

• اتصال Vuex به Firebase Binding Vuex to Firebase

• سفارشات را با Firebase همگام کنید Sync orders with Firebase

• نمایش سفارشات در قسمت مدیریت Displaying orders in the admin section

• افزودن کلید به لیست ها Adding keys to lists

• حذف موارد از پایگاه داده Removing items from the database

• پنهان کردن ادمین از کاربران غیرمجاز Hiding the admin from unauthorised users

• قوانین خواندن/نوشتن Firebase Firebase read/write rules

• محاسبه کل سبد Calculating the basket total

• فیلتر ارز جهانی Global currency filter

• کارهای پایانی Finishing touches

• بخش بیرونی Section outro

بارگذاری تنبل و تقسیم کد Lazy loading and code splitting

• به روز رسانی مهم: وارد کردن دینامیک نحو بابل Important Update: Babel syntax dynamic import

• تقسیم کد و بارگذاری تنبل چیست؟ What is code splitting and lazy loading?

• اجزای Async Async components

• بارگیری تنبل با روتر vue Lazy loading with the vue router

• گروه بندی مولفه ها به یک تکه Grouping components into the same chunk

• بارگذاری تنبل با رندر شرطی Lazy loading with conditional rendering

متشکرم Thank you

• متشکرم Thank you